<template>
  <div class="farms">
    <Header />
    <div class="g-box">
      <!-- <div class="banner">
        <img src="@/assets/images/banner-farms.png" />
      </div> -->
      <div class="banner">
        <h2>TokenSwap Farming</h2>
        <p>
          Skake LP tokens to earn. you can unstake at any time.<br />
          Rewards are calculated per block.
        </p>
      </div>
      <div class="body">
        <div class="toolbar">
          <div class="toolbar__control">
            <div
              class="g-clickable"
              v-for="(item, i) in viewList"
              :key="i"
              :class="{ on: item.code === view }"
              @click="view = item.code"
            >
              <i class="iconfont" :class="item.icon" />
            </div>
            <SwitchBase v-model="staked" text="Staked Only" />
            <TabBase v-model="tab" :options="tabList" />
          </div>
          <div class="toolbar__select">
            <SelectBase v-model="status" :options="statusList" />
          </div>
          <div class="toolbar__search">
            <InputBase v-model="search" placeholder="Search Farms" />
          </div>
        </div>
        <div class="list" v-if="farmList.length > 0">
          <FarmCard
            :farm="farm"
            v-for="(farm, i) in farmList"
            :loading="loading"
            :key="i"
          />
        </div>
        <div class="empty" v-else>
          <span>No Farm found.</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import FarmCard from "@/components/FarmCard";
import SwitchBase from "@/components/common/SwitchBase";
import SelectBase from "@/components/common/SelectBase";
import InputBase from "@/components/common/InputBase";
import TabBase from "@/components/common/TabBase";

import { fetchFarms } from "@/init";
import { mapState } from "vuex";

export default {
  components: {
    Header,
    FarmCard,
    SwitchBase,
    SelectBase,
    InputBase,
    TabBase,
  },
  data() {
    return {
      staked: false,
      loading: true,
      view: "category",
      viewList: [
        {
          code: "category",
          icon: "icon-category",
        },
        {
          code: "list",
          icon: "icon-list",
        },
      ],
      tab: "01",
      tabList: [
        {
          code: "01",
          name: "Live",
        },
        {
          code: "02",
          name: "Finished",
        },
      ],
      status: "01",
      statusList: [
        {
          value: "01",
          label: "Hot",
        },
        {
          value: "02",
          label: "Normal",
        },
        {
          value: "03",
          label: "Normal",
        },
        {
          value: "04",
          label: "Normal",
        },
        {
          value: "05",
          label: "Normal",
        },
      ],
      search: "",
      farmList: [{}, {}, {}, {}, {}, {}],
    };
  },
  computed: {
    ...mapState({
      account: (state) => state.account,
    }),
  },
  watch: {
    account() {
      this.load();
    },
  },
  mounted() {
    this.load();
  },
  methods: {
    async load() {
      if (!this.account) return;
      this.loading = true;
      const farmList = await fetchFarms();
      setTimeout(() => {
        this.farmList = farmList;
        this.loading = false;
      }, 3000);
    },
  },
};
</script>

<style lang="scss" scoped>
.farms {
  padding: 120px 0 30px;
}
.banner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  margin: 30px 0 60px;
  img {
    width: 100%;
  }

  h2 {
    font-size: 36px;
    font-family: "Roboto Black";
    color: var(--color);
    margin-bottom: 20px;
  }

  p {
    font-size: 16px;
    font-family: "Roboto Medium";
    color: var(--color-content);
    line-height: 1.5;
  }
}
.toolbar {
  display: flex;
  align-items: center;
  &__control {
    flex: 1;
    display: grid;
    align-items: center;
    grid-template-columns: 40px 55px 180px 275px;
    .g-clickable {
      margin-right: 8px;
      .iconfont {
        font-size: 36px;
        color: var(--border-color);
      }
      &.on {
        .iconfont {
          color: var(--color);
        }
      }
    }
  }

  &__select {
    width: 200px;
  }

  &__search {
    width: 350px;
    margin-left: 20px;
  }
}
.loading {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .icon {
    svg {
      width: 90px;
    }
  }
}
.list {
  margin-top: 60px;
  display: grid;
  grid-gap: 50px 30px;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.empty {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.03);

  span {
    font-size: 14px;
    font-family: "Roboto Medium";
    color: var(--color-content);
  }
}
</style>
